<template>
  <div>
    <!-- 菜单 -->
    <el-menu
      @select="select"
      :default-active="actMenu"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#333333"
      text-color="white"
      :unique-opened="opened"
      active-text-color="#333333"
    >
      <!-- 系统标题 -->
      <div class="title" data-step="1" :data-intro="dataIntro1">
        <img src="../assets/image/th.png" class="titleIcon" />
        <p class="titleP">重庆科技馆后台管理</p>
      </div>
      <div data-step="6" :data-intro="dataIntro6">
        <!--         <el-menu-item index="活动管理">
          <i class="el-icon-s-flag" style="color:#03a181"></i>
          <span slot="title">活动管理</span>
        </el-menu-item>  -->
        <template v-for="item in menuList">
          <template v-if="item.children.length == 0">
            <el-menu-item :index="item.menuName">
              <!-- <i
                class="el-icon-message-solid"
                v-if="item.menuName == '通知管理'"
                style="color: #03a181"
              ></i>
              <i
                class="el-icon-question"
                v-if="item.menuName == '资讯管理'"
                style="color: #03a181"
              ></i> -->
              <i
                v-if="item.icon ? item.icon.indexOf('el-') != -1 : false"
                :class="item.icon"
                style="color: #03a181"
              ></i>
              <SvgIcon
                style="
                  color: #03a181;
                  margin-right: 10px;
                  margin-left: 3px;
                  fontsize: 17px;
                "
                v-if="item.icon ? item.icon.indexOf('el-') == -1 : false"
                :iconClass="item.icon"
              />
              <span slot="title">{{ item.menuName }}</span>
            </el-menu-item>
          </template>
          <template v-else>
            <el-submenu :index="item.menuName">
              <template slot="title">
                <!-- <i
                  class="el-icon-s-promotion"
                  v-if="item.menuName == '预约管理'"
                  style="color: #03a181"
                ></i>
                
                <i
                  class="el-icon-s-finance"
                  v-if="item.menuName == '支付宝ISV'"
                  style="color: #03a181"
                ></i> -->
                <i
                  v-if="item.icon ? item.icon.indexOf('el-') != -1 : false"
                  :class="item.icon"
                  style="color: #03a181"
                ></i>
                <SvgIcon
                  style="
                    color: #03a181;
                    margin-right: 10px;
                    margin-left: 3px;
                    fontsize: 17px;
                  "
                  v-if="item.icon ? item.icon.indexOf('el-') == -1 : false"
                  :iconClass="item.icon"
                />
                <span slot="title" v-if="!isCollapse">{{ item.menuName }}</span>
              </template>
              <el-menu-item-group>
                <template v-for="Item in item.children">
                  <el-menu-item :index="Item.menuName">
                    <i
                      v-if="Item.icon ? Item.icon.indexOf('el-') != -1 : false"
                      :class="Item.icon"
                      style="color: #03a181"
                    ></i>
                    <SvgIcon
                      style="
                        color: #03a181;
                        margin-right: 10px;
                        margin-left: 3px;
                        fontsize: 17px;
                      "
                      v-if="Item.icon ? Item.icon.indexOf('el-') == -1 : false"
                      :iconClass="Item.icon"
                    />
                    {{ Item.menuName }}</el-menu-item
                  >
                </template>
              </el-menu-item-group>
            </el-submenu>
          </template>
        </template>
      </div>
    </el-menu>

    <el-container>
      <el-header class="elHeader">
        <!-- 左侧 -->
        <div class="flexCFS">
          <Icon
            @click.native="collapsedSider"
            :class="
              isCollapse
                ? 'rotate-icon rotate-icon1'
                : 'rotate-icon rotate-icon2'
            "
            type="md-menu"
            size="24"
          ></Icon>
          <div v-show="isCollapse" class="path">{{ actMenu }}</div>
        </div>
        <!-- 右侧 -->
        <div class="elHeaderRight">
          <!-- <Poptip trigger="hover" placement="bottom-end"> -->
          <!-- <div class="museum" data-step="2" :data-intro="dataIntro2" v-if="$store.state.superAdmin == 'false'">{{$store.state.museumName}}</div> -->
          <!-- <div class="userList" slot="content" style="max-height:400px" v-if="$store.state.superAdmin == 'false'">
              <template v-for="item in $store.state.museums">
                <p
                  @click="choose(item.id,item.name)"
                  style="margin-right:10px;padding-right:10px"
                  :class="$store.state.museumName==item.name?'nowMuseum':''">{{item.name}}</p>
              </template>
            </div> -->
          <!-- </Poptip> -->
          <!-- <div class="museum" v-if="$store.state.superAdmin == 'true'">超级管理员</div> -->
          <div class="museum" v-if="$store.state.userName">
            {{ $store.state.userName }}
          </div>

          <Poptip placement="bottom-end" style="margin-top: 5px">
            <div
              data-step="5"
              :data-intro="dataIntro5"
              class="user"
              @mouseover="mouseover"
              @mouseleave="mouseleave"
            >
              <div class="user_top" v-show="userTop">
                <i class="iconfont icon-gengduo-copy"></i>
              </div>
              <img src="../assets/image/th.png" />
              <!-- <img src="../assets/image/user.png"> -->
            </div>
            <div class="userList" slot="content">
              <p @click="changePassword">修改密码</p>
              <!-- <p @click="mineHome">个人中心</p> -->
              <p @click.stop="loginOut">退出登录</p>
            </div>
          </Poptip>
        </div>
      </el-header>
      <!-- 内容 -->
      <el-main :class="isCollapse ? 'elMain elMain2' : 'elMain elMain1'">
        <div class="alert" v-if="alert">
          <p class="alert_title">
            抗击疫情，博物文化公益支持：文旅绿码观众分时预约系统合作协议
          </p>
          <div class="alert_button" @click="lookDetail">查看详情</div>
        </div>
        <router-view></router-view>
        <div
          :class="helpShow ? 'helpModal' : 'helpModal helpModal2'"
          :style="isCollapse ? 'padding-left:75px' : 'padding-left:260px'"
        >
          <vue-help
            v-if="tokenSure"
            v-show="!helpShow"
            @hasSubmitProtocol="hasSubmitProtocol"
            @close="close"
          ></vue-help>
        </div>
        <p class="bottom">
          Copyright © 2019-2021
          <span class="bottomP" @click="toHome">杭州博物文化传播有限公司</span>.
          All Rights Reserved.
          <a
            style="text-decoration: none; color: rgba(0, 0, 0, 0.3)"
            href="https://beian.miit.gov.cn"
            >浙ICP备2021008879号-2</a
          >
        </p>
      </el-main>
    </el-container>
    <!-- 修改密码弹窗 -->
    <Drawer
      title="修改密码"
      :mask-closable="closable"
      :closable="false"
      v-model="drawer"
      width="50"
    >
      <h2>重庆科技馆后台管理系统</h2>
      <p style="color: red; font-weight: bold; margin-top: 5px">
        长度8位以上，至少由数字、字母、特殊符号中的两种及以上组成！
      </p>
      <!--       <Input
        prefix="md-lock"
        type="password"
        password
        placeholder="请输入旧密码"
        v-model="oldPassword"
        style="width: 100%;margin-top:20px" /> -->
      <Input
        type="password"
        password
        placeholder="请输入老密码"
        v-model="oldPassword"
        style="width: 100%; margin-top: 20px"
      />
      <Input
        type="password"
        password
        placeholder="请输入新密码"
        v-model="newPassword"
        style="width: 100%; margin-top: 20px"
      />

      <Button
        style="width: 100%; margin-top: 20px"
        type="primary"
        @click="sure"
        :loading="loading"
        >确认修改</Button
      >
      <Button
        style="width: 100%; margin-top: 20px"
        type="warning"
        @click="cancel"
        >取消修改</Button
      >
    </Drawer>
    <!-- 切换分支 -->
    <Modal v-model="modal" width="500">
      <h2>
        确定要切换到 <span style="color: #2d8cf0">{{ name }}</span> 吗
      </h2>
      <div slot="footer">
        <Button class="Button" type="primary" @click="submit">确认切换</Button>
      </div>
    </Modal>
    <!-- 最终提示 -->
    <div class="end" data-step="7" :data-intro="dataIntro7"></div>
    <!-- 消息 -->
    <Modal v-model="messageModal" :title="message.title" width="50">
      <p v-html="message.content"></p>
      <div
        slot="footer"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <p>{{ message.gmtCreate }}</p>
        <Button class="Button" type="primary" @click="messageModal = false"
          >关闭</Button
        >
      </div>
    </Modal>
    <!--  -->
    <Modal
      v-model="needModal"
      :mask-closable="closable"
      :closable="closable"
      title="温馨提示"
      width="30"
    >
      <h2 style="text-align: justify">
        根据公安部门数据安全有关要求，未设置密码的账户将无法正常登录。密码复杂度要求：长度8位以上，至少由数字、字母、特殊符号中的两种组成。给您造成的不便敬请谅解，数据安全需要大家一起努力~
      </h2>
      <div
        slot="footer"
        style="display: flex; justify-content: center; align-items: center"
      >
        <Button
          style="width: 100%"
          class="Button"
          type="primary"
          @click="
            drawer = true;
            needModal = false;
          "
          >前往修改</Button
        >
      </div>
    </Modal>
    <!-- 修改密码弹窗 -->
    <Drawer
      title="站内消息通知"
      :closable="false"
      v-model="messageDrawer"
      width="50"
    >
      <RadioGroup v-model="read" type="button" @on-change="changRead">
        <Radio label="1">未读</Radio>
        <Radio label="2">已读</Radio>
        <Radio label="3">全部</Radio>
      </RadioGroup>
      <Table
        @on-row-click="onRowClick"
        :loading="loading3"
        class="table"
        highlight-row
        :columns="columns"
        :data="messageList"
      ></Table>
    </Drawer>
    <!-- 弹窗 -->
    <!-- <div class="helpTextModal" @click="helpText" :style="{'width': helpTextShow?'230px':'50px'}">
      <img src="../assets/image/help.png"></img>
      <p v-show="helpTextShow">查看帮助文档，请点这里</p>
      <div class="helpTextModal_logo"></div>
    </div> -->
    <!-- 抽屉 -->
    <Drawer width="600" title="帮助文档" :closable="false" v-model="drawerText">
      <!-- <Table :loading="loadingText" :columns="columnsText" :data="dataText"></Table> -->
      <div style="font-weight: bold; font-size: 20px">功能操作指南</div>
      <el-table
        :data="dataText"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="type" label="类型" width="180">
        </el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="lookText(scope.$index, dataText)"
              type="text"
              size="small"
            >
              查看文档
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </Drawer>

    <!-- 个人中心 -->
  </div>
</template>

<script>
import store from "../vuex/store.js";
import { md5 } from "../config/md5.js";
import { Notice } from "view-design";

import SvgIcon from "../components/SvgIcon/index.vue";
export default {
  components: {
    SvgIcon,
  },
  data() {
    return {
      actMenu: localStorage.getItem("routerActive"),
      isCollapse: false,
      closable: false,
      userTop: false,
      drawer: false,
      loading: false,
      modal: false,
      tokenSure: false,
      helpShow: true,
      alert: false,
      helpTextShow: true,
      messageModal: false,
      messageDrawer: false,
      loading3: false,
      timer: false,
      drawerText: false,
      loadingText: false,
      needModal: false,
      store,
      oldPassword: "",
      newPassword: "",
      newPasswordAgain: "",
      opened: "",
      name: "",
      id: "",
      screenWidth: document.body.clientWidth,
      read: "1",

      menuList: [],
      dataText: [],
      NoticeDto: [],
      list: [],
      messageList: [],
      message: {},
      columns: [
        { title: "标题", key: "title", align: "center" },
        { title: "发布时间", key: "gmtCreate", align: "center" },
      ],
      columnsText: [
        { title: "文档标题", key: "title", align: "left" },
        {
          title: "操作",
          width: 140,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: { type: "success" },
                  on: {
                    click: () => {
                      this.lookText(params);
                    },
                  },
                },
                "查看文档"
              ),
            ]);
          },
        },
      ],

      // 提示
      dataIntro1:
        "欢迎来到文旅绿码后台管理系统，您在这里可以添加博物馆信息或者配置文旅绿码预约信息等。",
      dataIntro2:
        "这里是您当前登录的博物馆，名称在这里显示，如果您有多个馆可以在这里进行切换。",
      dataIntro3:
        "这里是文旅绿码系统合作协议，您需要签署协议并加盖公章后，上传协议的扫描件。",
      dataIntro4: "这里是站内消息通知，开发者发布的新版本内容会在这里显示。",
      dataIntro5: "点击此处头像，能够退出登录。",
      dataIntro6: "这里可以修改博物馆基础信息和配置信息，比如预约或者导览",
      dataIntro7:
        "欢迎使用文旅绿码后台管理系统，使用过程中有疑问可以电话联系：139-0571-8102。",
    };
  },
  created() {
    this.getMenus();
    // this.needAlterPwd();
  },
  mounted() {
    setTimeout(() => {
      this.helpTextShow = false;
    }, 5000);
    // 初始化
    if (document.body.clientWidth < 900) {
      this.isCollapse = true;
    } else {
      this.isCollapse = false;
    }
    let that = this;
    // 监听
    window.onresize = () => {
      return (() => {
        setTimeout(function () {
          that.screenWidth = document.body.clientWidth;
        }, 300);
      })();
    };
  },
  watch: {
    screenWidth(val) {
      if (!this.timer) {
        this.screenWidth = val;
        if (this.screenWidth < 900) {
          this.isCollapse = true;
        } else {
          this.isCollapse = false;
        }
        this.timer = true;
        let that = this;
        setTimeout(function () {
          that.timer = false;
        }, 400);
      }
    },
  },
  methods: {
    cancel() {
      this.drawer = false;
      this.needAlterPwd();
    },
    // 判断是否需要设置密码的接口
    // needAlterPwd() {
    //   this.$http("stage/user/needAlterPwd", {}, "get", (res) => {
    //     if (res.data.code == 200) {
    //       if (res.data.data) {
    //         this.needModal = true;
    //       }
    //     }
    //   });
    // },
    helpText() {
      this.getDocs();

      this.drawerText = true;
    },
    lookText(data, text) {
      console.log(data, text);
      let { href } = this.$router.resolve({
        name: "帮助文档查看",
      });
      localStorage.setItem("type", text[data].type);
      localStorage.setItem("title", text[data].title);
      localStorage.setItem("content", text[data].content);
      window.open(href, "_blank");
      this.drawerText = false;
    },
    // 获取手册列表
    getDocs() {
      this.loadingText = true;
      this.$http("/stage/doc/getDocs", {}, "get", (res) => {
        if (res.data.code == 200) {
          this.dataText = res.data.data;

          this.dataText.sort((a, b) => {
            if (a["type"] != b["type"]) {
              return a["type"].localeCompare(b["type"]);
            }
          });
          console.log(this.dataText);
          this.loadingText = false;
          this.flitterData(this.dataText);
        }
      });
    },
    // 获取公告
    getBroadcastNotify() {
      this.$http("/stage/museumNotice/getBroadcastNotify", {}, "get", (res) => {
        if (res.data.code == 200) {
          if (res.data.data.length) {
            Notice.info({
              title: "消息通知",
              desc: res.data.data[0].content,
              duration: 0,
            });
          }
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    close() {
      this.helpShow = !this.helpShow;
    },
    // 获取菜单
    getMenus() {
      let that = this;
      this.$http("/chongqing/stage/web/getMenus", {}, "get", (res) => {
        if (res.data.code == 1000) {
          this.menuList = res.data.data;
          // this.$store.commit("setMenus", res.data.data)
          console.log("嘉华发图图后台回复让人",this.menuList);
          localStorage.setItem("menus", JSON.stringify(this.menuList));
          let firstM = res.data.data[0];
          let name = firstM.menuName;
          console.log(firstM.children.length);
          if (firstM.children.length > 0) {
            name = firstM.children[0].menuName;
          }
          console.log(name);
          // let that = this
          let menus = JSON.parse(localStorage.getItem("menus"));
          console.log(menus);
          let routes = [
            {
              path: "/",
              name: "signin",
              meta: {
                title: "文旅绿码",
              },
              component: (resolve) => require(["../page/signin.vue"], resolve),
            },
            {
              path: "/warning",
              name: "404",
              meta: {
                title: "出错了",
              },
              component: (resolve) => require(["../page/404.vue"], resolve),
            },

            {
              path: "/main",
              name: "main",
              component: (resolve) => require(["../page/main.vue"], resolve),
              children: [],
            },
          ];
          if (menus != null) {
            menus.map((item) => {
              console.log(item);
              if (item.children.length != 0) {
                item.children.map((item1) => {
                  if (
                    item1.routing.indexOf("/") != -1 &&
                    item1.routing.indexOf("/") == 0
                  ) {
                    item1.routing = item1.routing.slice(1);
                  }
                  routes[2].children.push({
                    path: "/" + item1.routing,
                    name: item1.menuName,
                    meta: {
                      title: item1.menuName,
                    },
                    component: (resolve) =>
                      require([
                        "../page/" +
                          item1.routing +
                          "/" +
                          item1.routing +
                          ".vue",
                      ], resolve),
                  });
                });
              } else {
                if (
                  item.routing.indexOf("/") != -1 &&
                  item.routing.indexOf("/") == 0
                ) {
                  item.routing = item.routing.slice(1);
                  console.log(item.routing);
                }
                routes[2].children.push({
                  path: "/" + item.routing,
                  name: item.menuName,
                  meta: {
                    title: item.menuName,
                  },
                  component: (resolve) =>
                    require([
                      "../page/" + item.routing + "/" + item.routing + ".vue",
                    ], resolve),
                });
              }
            });
          }
          this.$router.addRoutes(routes); // 更新路由表
          if (localStorage.getItem("routerActive")) {
            this.$router.push({ name: localStorage.getItem("routerActive") });
          } else {
            this.$router.push({ name });
          }

          this.tokenSure = true;
          // this.getBroadcastNotify();
        } else {
          // this.$Message.error(res.data.msg)
        }
      });

      // this.$http(
      //   "/stage/menu/getMenus",
      //   {
      //     museumId: this.$store.state.museumId,
      //   },
      //   "get",
      //   (res) => {
      //     if (res.data.code == 200) {
      //       this.menuList = res.data.data;
      //       localStorage.setItem("menus", JSON.stringify(this.menuList));
      //       // if (this.$store.state.superAdmin == "false") {
      //       //   var arr = [];
      //       //   this.menuList.map((item) => {
      //       //     arr.push(item.menuName);
      //       //   });
      //       //   console.log(arr);
      //       //   if (arr.indexOf("场馆信息") != -1) {
      //       //     this.$router.push("/infor");
      //       //   } else {
      //       //     this.$router.push("/liuyan");
      //       //   }

      //       // }
      //       let firstM = res.data.data[0];
      //         let name = firstM.menuName;
      //         console.log(firstM.children.length);
      //         if (firstM.children.length > 0) {
      //           name = firstM.children[0].menuName;
      //         }
      //         this.$router.push({ name });
      //       this.hasSubmitProtocol();
      //       this.getMuseumNoticeDto();
      //       // 判断是否有机会
      //       this.$http("/stage/tips/getCloseFlag", {}, "get", (res) => {
      //         if (res.data.code == 200) {
      //           if (!res.data.data) {
      //             // if(this.$store.state.superAdmin == 'true'){
      //             if (this.$store.state.superAdmin != "true") {
      //               setTimeout(function () {
      //                 that.startIntro();
      //               }, 100);
      //             }
      //           }
      //         } else {
      //           this.$Message.error(res.data.msg);
      //         }
      //       });
      //       this.tokenSure = true;
      //       this.getBroadcastNotify();
      //     } else {
      //       // this.$Message.error(res.data.msg)
      //     }
      //   }
      // );
    },
    // 判断是否提交过协议
    hasSubmitProtocol() {
      this.$http("/stage/protocol/hasSubmitProtocol", {}, "get", (res) => {
        if (res.data.code == 200) {
          if (!res.data.data) {
            if (this.$store.state.superAdmin != "true") {
              this.alert = true;
            }
          }
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    helpClick() {
      this.helpShow = !this.helpShow;
      this.isCollapse = true;
      this.$store.state.isCollapse = true;
    },
    lookDetail() {
      this.helpShow = false;
      this.isCollapse = true;
      this.$store.state.isCollapse = true;
    },
    // 步骤
    startIntro() {
      let that = this;
      introJs()
        .setOptions({
          prevLabel: "上一步",
          nextLabel: "下一步",
          skipLabel: "跳过新手指导",
          doneLabel: "不再提示",
          /* 引导说明框相对高亮说明区域的位置 */
          tooltipPosition: "right",
          /* 是否显示说明的数据步骤*/
          showStepNumbers: false,
        })
        .oncomplete(function () {
          //点击跳过按钮后执行的事件
          that.$http("/stage/tips/closeTips", {}, "get", (res) => {
            if (res.data.code == 200) {
              that.$Message.success("以后不会再进行提示");
            } else {
              that.$Message.error(res.data.msg);
            }
          });
        })
        .onexit(function () {
          //点击结束按钮后,执行的事件
        })
        .start();
    },
    // 选择博物馆
    choose(id, name) {
      if (this.$store.state.museumId != id) {
        this.modal = true;
        this.name = name;
        this.id = id;
        this.loading = false;
      } else {
      }
    },
    // 确认切换
    submit() {
      this.$store.state.museumId = this.id;
      this.$store.state.museumName = this.name;
      localStorage.setItem("museumId", this.id);
      localStorage.setItem("museumName", this.name);
      if (this.$router.currentRoute.fullPath == "/infor") {
        location.reload();
      } else {
        this.$router.push({ name: "场馆信息" });
        this.$Message.success("切换到 " + this.name + " 成功");
        this.modal = false;
      }
    },
    collapsedSider() {
      this.isCollapse = !this.isCollapse;
      this.$store.state.isCollapse = !this.$store.state.isCollapse;
    },
    mouseover() {
      this.userTop = true;
    },
    mouseleave() {
      this.userTop = false;
    },
    // 切换页面
    select(data) {
      this.helpShow = true;
      this.$router.push({ name: data });
    },
    // 修改密码
    sure() {
      var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/;
      if (this.oldPassword.trim().length == 0) {
        this.$Message.error("请输入旧密码");
        return false;
      }
      if (this.newPassword.trim().length == 0) {
        this.$Message.error("请输入新密码");
        return false;
      }
      if (this.newPassword.trim().length < 8) {
        this.$Message.error("新密码的长度最少8位");
        return false;
      }
      if (!passwordreg.test(this.newPassword)) {
        this.$Message.error(
          "新密码必须由数字、字母、特殊符号中的两种及以上组成！"
        );
        return false;
      }

      // if (this.newPassword != this.newPasswordAgain) {
      //   this.$Message.error("新密码，两次不一致");
      //   return false;
      // }
      this.loading = true;
      this.$http(
        "/chongqing/stage/web/updatePassword",
        {
          oldPassword: md5(this.oldPassword),
          newPassword: md5(this.newPassword),
        },
        "post",
        (res) => {
          if (res.data.code == 1000 && res.data.data.flag) {
            this.$Message.success("修改密码成功");
            this.drawer = false;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading = false;
        }
      );
    },
    // 修改密码
    changePassword() {
      this.oldPassword = "";
      this.newPassword = "";
      this.newPasswordAgain = "";
      this.drawer = true;
    },
    // 退出登录
    loginOut() {
      const msg = this.$Message.loading({
        content: "退出中，请稍等",
        duration: 0,
      });
      this.$http("/chongqing/stage/web/logout", {}, "get", (res) => {
        if (res.data.code == 1000) {
          setTimeout(msg, 0);
          this.$store.commit("signOut");
          this.$router.push({ name: "signin" });
          this.$Message.success("退出登录成功！");
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    // 前往官网
    toHome() {
      window.location.href = "http://app.bowu66.com/museum-cms/bench/homePage";
    },
    // 通知
    getMuseumNoticeDto() {
      this.$http(
        "/stage/museumNotice/getMuseumNoticeDto",
        {
          current: 1,
          read: false,
          size: 1000,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.NoticeDto = res.data.data.records;
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    messageClick(data) {
      this.message = {};
      this.messageModal = true;
      this.$http(
        "/stage/museumNotice/getMuseumNoticeDetail",
        {
          id: data,
        },
        "get",
        (res) => {
          if (res.data.code == 200) {
            this.message = res.data.data;
            this.getMuseumNoticeDto();
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    lookMore() {
      let read = "";
      if (this.read == "1") {
        read = false;
      }
      if (this.read == "2") {
        read = true;
      }
      if (this.read == "3") {
        read = null;
      }
      this.loading3 = true;
      this.messageDrawer = true;
      this.$http(
        "/stage/museumNotice/getMuseumNoticeDto",
        {
          current: 1,
          read: read,
          size: 1000,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.messageList = res.data.data.records;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading3 = false;
        }
      );
    },
    changRead() {
      this.lookMore();
    },
    onRowClick(data) {
      this.messageClick(data.id);
    },
    allLook() {
      this.read = "3";
      this.lookMore();
    },
    mineHome() {
      this.isCollapse = true;
      this.$store.state.isCollapse = true;
      this.$router.push({ name: "用户中心" });

      // this.$Message.error("敬请期待");
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(column);
      // console.log(rowIndex);
      // console.log(columnIndex);
      // if (columnIndex === 0) {
      //   if (rowIndex % 2 === 0) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1,
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0,
      //     };
      //   }
      // }
      console.log(this.dataText);
      if (columnIndex === 0) {
        const _row = this.flitterData(this.dataText).one[rowIndex];
        console.log(_row);
        const _col = _row > 0 ? 1 : 0;

        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    showRow(index, rows) {
      console.log(index, rows, this.dataText);
    },
    flitterData(arr) {
      let spanOneArr = [],
        concatOne = 0;

      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          if (item.type === arr[index - 1].type) {
            //第一列根据相同name合并

            spanOneArr[concatOne] += 1;

            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);

            concatOne = index;
          }
        }
      });
      console.log(spanOneArr);
      return {
        one: spanOneArr,
      };
    },
  },
};
</script>

<style scoped>
/* 弹窗 */
.helpTextModal {
  height: 50px;
  background: #19be6b;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.helpTextModal:hover {
  opacity: 0.8;
}
.helpTextModal img {
  min-width: 30px;
  min-height: 30px;
  width: 30px;
  height: 30px;
}
.helpTextModal p {
  font-size: 14px;
  color: white;
  font-weight: bold;
  margin-left: 10px;
  transition: all 0.3s;
}
.helpTextModal_logo {
  width: 10px;
  height: 10px;
  background: #f56c6c;
  position: absolute;
  right: 0px;
  top: 0px;
  border-radius: 50%;
  border: 2px solid white;
  box-sizing: content-box;
}

/* 公告 */
.gonggao {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
}

/* 步骤 */

.end {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 50%;
  left: 50%;
  margin: -0.5px;
  z-index: 1000;
}

/* 菜单 */

.el-menu-vertical-demo {
  width: 249px;
  height: 100%;
  position: absolute;
  z-index: 20;
  box-shadow: 0 2px 4px 0 rgba(175, 186, 200, 0.17);
  overflow-y: scroll;
  overflow-x: hidden;
  padding-top: 51px;
}

.el-menu--collapse {
  height: 100%;
  position: absolute;
  z-index: 20;
  width: 64px;
  box-shadow: 0 2px 4px 0 rgba(175, 186, 200, 0.17);
}

.el-header {
  height: 40px;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 2px 4px 0 rgba(175, 186, 200, 0.17);
  z-index: 10;
}

/* 使用协议 */

.alert {
  width: 100%;
  background-color: #f2fbff;
  height: 40px;
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.alert:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.alert_title {
  font-size: 14px;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert_button {
  min-width: 74px;
  height: 26px;
  margin-right: 10px;
  border: 1px solid #19be6b;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  border-radius: 4px;
  margin-left: 10px;
  color: #19be6b;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert_button:hover {
  box-shadow: 0 0 1px #ccecff;
  opacity: 0.8;
}

.badge {
  cursor: pointer;
  margin-left: 20px;
}

.helpModal {
  width: 100%;
  height: 100%;
  background-color: #efefef;
  z-index: 5;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.6s;
  top: -100%;
  padding-top: 60px;
}

.helpModal2 {
  top: 0 !important;
}

/* 消息通知 */

.poptip {
  width: 100%;
}

.poptip_title {
  width: 100%;
  height: 40px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.poptip_content {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #f5f5f5;
  border-left: 1px solid #f5f5f5;
  border-right: 1px solid #f5f5f5;
  padding-top: 8px;
}

.poptip_content_name {
  font-size: 12px;
  padding-left: 10px;
  cursor: pointer;
  color: #333;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.poptip_content_name:hover {
  color: #19be6b;
}

.poptip_content_content {
  font-size: 10px;
  padding-left: 10px;
  line-height: 15px;
  color: rgba(0, 0, 0, 0.6);
}

.poptip_bottom {
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #f5f5f5;
  border-left: 1px solid #f5f5f5;
  border-right: 1px solid #f5f5f5;
}

.poptip_bottom p {
  font-size: 12px;
  line-height: 30px;
  padding-left: 10px;
  cursor: pointer;
}

.poptip_bottom p:hover {
  color: #19be6b;
}

.poptip_nothing {
  width: 100%;
  height: 200px;
  position: relative;
}

.poptip_image {
  width: 90px;
  height: 77px;
  margin-top: 40px;
  position: absolute;
  left: 50%;
  margin-left: -45px;
}

.poptip_nothing_text {
  width: 100%;
  position: absolute;
  bottom: 25px;
  text-align: center;
}

.rotate-icon {
  transition: all 0.3s;
  cursor: pointer;
  color: #20335d;
}
.rotate-icon:hover {
  background-color: #e8f5fd;
}
.rotate-icon1 {
  transform: rotate(-90deg);
  margin-left: 64px;
}
.rotate-icon2 {
  margin-left: 250px;
}
.elHeader {
  height: 50px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}
.elHeaderRight {
  display: flex;
  align-items: center;
}
.elMain {
  width: 100%;
  height: 100%;
  background-color: #ebebeb;
  position: absolute;
  width: 100%;
  transition: all 0.3s;
  z-index: 2;
}
.elMain1 {
  padding: 60px 10px 0 260px;
}
.elMain2 {
  padding: 60px 10px 0 74px;
}
.title {
  background-color: #333333;
  width: 100%;
  position: absolute;
  left: -15px;
  height: 50px;
  top: -8px;
  margin: 8px 15px;
  display: flex;
  align-items: center;
  z-index: 10;
  padding: 0 15px;
}
.titleP {
  color: white;
  margin-left: 15px;
  letter-spacing: 2px;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: oblique;
  font-weight: bold;
}
.titleIcon {
  height: 32px;
  cursor: pointer;
  border-radius: 4px;
  z-index: 10;
}
.titleIcon:hover {
  box-shadow: 0 0 3px #3d88c2;
  opacity: 0.8;
}
.bottom {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: rgba(0, 0, 0, 0.3);
  font-size: 12px;
}
.user {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  margin-left: 20px;
  position: relative;
}
.user img {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
}
.user_top {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user_top i {
  color: white;
}
.userList p {
  line-height: 30px;
  padding-left: 10px;
  cursor: pointer;
}
.userList p:hover {
  background-color: rgba(25, 190, 107, 0.2);
  color: #19be6b;
}
.path {
  margin-left: 20px;
  height: 28px;
  background: linear-gradient(
    to bottom right,
    #19be6b,
    rgba(25, 190, 107, 0.5)
  );
  border-radius: 28px;
  color: white;
  text-align: center;
  font-size: 12px;
  line-height: 28px;
  padding: 0 20px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}
.path:hover {
  opacity: 0.8;
}
.path2 {
  margin-left: 20px;
  height: 28px;
  background: #19be6b;
  border-radius: 28px;
  color: white;
  text-align: center;
  font-size: 14px;
  line-height: 28px;
  padding: 0 20px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}
.path2:hover {
  opacity: 0.8;
}
.museum {
  cursor: pointer;
  padding: 2px 10px;
  background-color: rgba(25, 190, 107, 0.2);
  color: #19be6b;
  border-radius: 5px;
  min-width: 130px;
  text-align: center;
}
.nowMuseum {
  background-color: rgba(25, 190, 107, 0.2);
  color: #19be6b;
}
.museum:hover {
  opacity: 0.8;
}
.propTipSearch {
  margin-bottom: 10px;
  padding-right: 10px;
}
.bottomP {
  color: #19be6b;
  cursor: pointer;
  opacity: 0.8;
}
.bottomP:hover {
  opacity: 1;
}
</style>


